<template>
  <div class="item-container">
    <a-space :size="16" direction="vertical" fill>
      <a-descriptions
        v-for="(item, idx) in blockDataList"
        :key="idx"
        :label-style="{
          textAlign: 'right',
          width: '200px',
          paddingRight: '10px',
          color: 'rgb(var(--gray-8))'
        }"
        :value-style="{ width: '400px' }"
        :title="item.title"
        :data="item.data"
      >
        <template #value="{ value }">
          <a-skeleton v-if="loading" :animation="true">
            <a-skeleton-line :widths="['200px']" :rows="1" />
          </a-skeleton>
          <span v-else>{{ value }}</span>
        </template>
      </a-descriptions>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from "vue"
import { useI18n } from "vue-i18n"
import { ProfileBasicRes } from "@/api/profile"

type BlockList = {
  title: string
  data: {
    label: string
    value: string
  }[]
}[]

const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  renderData: {
    type: Object as PropType<ProfileBasicRes>,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const { t } = useI18n()
const blockDataList = computed<BlockList>(() => {
  const { renderData } = props
  const result = []
  result.push({
    title: props.type === "pre" ? t("basicProfile.title.preVideo") : t("basicProfile.title.video"),
    data: [
      {
        label: t("basicProfile.label.video.mode"),
        value: renderData?.video?.mode || "-"
      },
      {
        label: t("basicProfile.label.video.acquisition.resolution"),
        value: renderData?.video?.acquisition.resolution || "-"
      },
      {
        label: t("basicProfile.label.video.acquisition.frameRate"),
        value: `${renderData?.video?.acquisition.frameRate || "-"} fps`
      },
      {
        label: t("basicProfile.label.video.encoding.resolution"),
        value: renderData?.video?.encoding.resolution || "-"
      },
      {
        label: t("basicProfile.label.video.encoding.rate.min"),
        value: `${renderData?.video?.encoding.rate.min || "-"} bps`
      },
      {
        label: t("basicProfile.label.video.encoding.rate.max"),
        value: `${renderData?.video?.encoding.rate.max || "-"} bps`
      },
      {
        label: t("basicProfile.label.video.encoding.rate.default"),
        value: `${renderData?.video?.encoding.rate.default || "-"} bps`
      },
      {
        label: t("basicProfile.label.video.encoding.frameRate"),
        value: `${renderData?.video?.encoding.frameRate || "-"} fpx`
      },
      {
        label: t("basicProfile.label.video.encoding.profile"),
        value: renderData?.video?.encoding.profile || "-"
      }
    ]
  })

  result.push({
    title: props.type === "pre" ? t("basicProfile.title.preAudio") : t("basicProfile.title.audio"),
    data: [
      {
        label: t("basicProfile.label.audio.mode"),
        value: renderData?.audio?.mode || "-"
      },
      {
        label: t("basicProfile.label.audio.acquisition.channels"),
        value: `${renderData?.audio?.acquisition.channels || "-"} ${t("basicProfile.unit.audio.channels")}`
      },
      {
        label: t("basicProfile.label.audio.encoding.channels"),
        value: `${renderData?.audio?.encoding.channels || "-"} ${t("basicProfile.unit.audio.channels")}`
      },
      {
        label: t("basicProfile.label.audio.encoding.rate"),
        value: `${renderData?.audio?.encoding.rate || "-"} kbps`
      },
      {
        label: t("basicProfile.label.audio.encoding.profile"),
        value: renderData?.audio?.encoding.profile || "-"
      }
    ]
  })

  return result
})
</script>

<style scoped lang="less">
.item-container {
  padding-top: 20px;
  :deep(.arco-descriptions-item-label) {
    font-weight: normal;
  }
}
</style>
